<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.tietiao.com/functions" prefix="my"%>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>完善个人信息</title>
<!--[if lt IE 9]>
		<script src="/_ui/js/html5.js"></script>
	<![endif]-->
<!--[if lte IE 7]>
		<link rel="stylesheet" type="text/css" media="all" href="../css/feground/ie.css" />
	<![endif]-->
<link rel="stylesheet" media="all" href="./css/feground/main.css">	
<script type="text/javascript" src="./js/fg/common/utils.js"></script>
<script type="text/javascript" src="./js/My97DatePicker/WdatePicker.js"></script>
<%@ include file="../include/include.jsp"%>
<script type="text/javascript">
	$(function() {
		var email = $("#email");
		email.blur(validateEmail);
		function validateEmail(){
			if(email.val()==''){
				alert("邮箱不能为空");
				return false;
			}else if(!isEmail(email.val())){
				alert("邮箱格式不正确");
				return false;
			}else{
				
			}
		}
		$("#commodityPic").change(function() {ajaxFileUpload();});
		createDropDown();
		$(".dropdown dd ul").hide();
	    $(".dropdown dt a").click(function() {
	        $(".dropdown dd ul").toggle();
	    });
	    $(".dropdown dd ul li a").click(function() {
	        var text = $(this).html();
	        $(".dropdown dt a").html(text);
	        $(".dropdown dd ul").hide();
	        var source = $("#source");
	        source.val($(this).find("span.value").html());
	    })
	});
/**
 * Ajax上传方法
 */
function ajaxFileUpload() {
	var fileName = $('#commodityPic').val();
	if (!com.tietiao.Validator.checkPicSuffix(fileName)) {
		alert('请上传jpg|png|gif格式的图片!');
		return;
	}
	// loading();// 动态加载小图标
	$.ajaxFileUpload({
				url : './ucenter_ucenter_upload.htm',
				secureuri : false,
				fileElementId : 'commodityPic',
				dataType : 'json',
				success : function(data, status) {
					if (data.flag == true) {
						$("#uploadTime").val($("#uploadTime").val()+1);
						$("#user_head").attr('src',data.imgRelPath+"?rand="+ $("#uploadTime").val());
					} else {
						alert('图片大小或则图片分辨率不合格!');
					}
					$('#jUploadFramecommodityPic').remove();
					$("#commodityPic").change(function() {
								ajaxFileUpload();
					});
				},
				error : function(data, status, e) {
					alert(e);
				}
			});
}
function loading() {
	$("#loading").ajaxStart(function() {
				$(this).show();
			}).ajaxComplete(function() {
				$(this).hide();
		});
}

function getCity(obj){
	$.ajax({
	   dataType:'json',
	   url: "ucenter_ucenter_searchCity.htm?proviCode="+$(obj).val(),
	   success:function(data){
	   		$("#cityId").empty();
	   		var options = "<option value=''>--请选择--</option>"
		   for(var i = 0;i<data.length;i++){
		   		options +="<option values='"+data[i].code+"'>"+data[i].name+"</option>";
		   }
		   $("#cityId").html(options);
	   }
	});
}
function createDropDown() {
    var source = $("#sourceCity");
    var selected = source.find("option[selected]");/* 获取选择的选项; */
    var options = $("option", source);/* 获取所有 option 标签元素; */
	/* 在 body 标签里创建 id 为 target 的 dl 标签; */
    /*$("#city").appendTo('<dl id="target" class="dropdown"></dl>'); */
    $('<dl id="target" class="dropdown"></dl>').insertAfter("#sourceCity");
	/*
	 * 在 dl 标签里创建 dt, a, span 标签,
	 * 并将获取选择的选项值复给 a 标签,
	 * 其 value 值复给 span 标签;
	 */
    $("#target").append('<dt><a href="javascript:void(0)">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>');
	/* 在 dl 标签里创建 dd, ul 标签; */
    $("#target").append('<dd><ul></ul></dd>');
	/* 在 ul 标签里创建 li, a, span 标签,
	 * 并将所有获得的选项值复给 a 标签,
	 * 其 value 值复给 span 标签,
	 * 最后循环输出包含所有 值 和 value 值的 li 标签;
	 */
    options.each(function() {
        $("#target dd ul").append('<li><a href="javascript:void(0)">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>');
    })
}
</script>
</head>
<body style="overflow: inherit;" class="wider no-subnav catalog-lists">
	<c:import url="../include/default_head.jsp" >
		<c:param name="menu" value="9"></c:param>
	</c:import>
	<div class="container">
	<div class="wrapper-content left-sidebar">
		<div id="content">
			<div><img src="${photoPath}${userInfo.userPhoto}" id="user_head"/>&nbsp;
				<button class="button sign" type="submit" onclick="$('#commodityPic').click()">浏览</button>
				<input type="file"  id="commodityPic" name="commodityPic"  class="button sign file"  size="1" hidefocus style="display: none;"/> 
			</div>
			<form action="ucenter_ucenter_update.htm" method="post">
				<input id="uploadTime" value="1" type="hidden">
				${my:tokenInput()}
				<div class="user-info">
					<fieldset class="hastext">
						<span class="title">用户名：</span>
						<input value="${userInfo.petName }" name="userInfo.petName" type="text" readonly class="sffocus jqPlaceholder readonly" original-title="Choose a unique username" value="飞翔的企鹅">
						<br>
						<span class="title">注册邮箱：</span>
						<input type="text"  value="${userInfo.email }" class="sffocus jqPlaceholder" name="userInfo.email" id="email" type="text" maxlength="30">
						<br>
					</fieldset>
				</div>
				<div class="user-info">
					<fieldset class="hastext">
						<span class="title">真实姓名：</span>
						<input type="text"value="${userInfo.relName}" class="sffocus jqPlaceholder" name="userInfo.relName" type="text" maxlength="30">
						<br>
						<span class="title">性别：</span>
							<select id="sourceCity" style="display:none;" name="userInfo.gender">
								<option ${userInfo.gender==0 ? 'selected ':''} value="0"> 我不想说 </option>
								<option ${userInfo.gender==1 ? 'selected ':''} value="1"> 男 </option>
								<option ${userInfo.gender==2 ? 'selected ':''} value="2"> 女 </option>
							</select>
						<br>
						<span class="title">出生年月：</span>
						<input type="text" value="${userInfo.birthDay}" class="sffocus jqPlaceholder" name="userInfo.birthDay" type="text" onClick="WdatePicker()">
						<br>
						<span class="title">省份城市：</span>
						<input type="text"value="${userInfo.province}" placeholder="所在省份" name="userInfo.province" class="sffocus jqPlaceholder" >
						<br>
						<span id="" class="title">毕业院校：</span>
						<input type="text" value="${userInfo.school}" class="sffocus jqPlaceholder" name="userInfo.school" type="text" maxlength="50"/>
						<br>
						<span class="title">个人主页：</span>
						<input value="${userInfo.homePage}" class="sffocus jqPlaceholder" name="userInfo.homePage" type="text" maxlength="80"/>
						<br>
						<span class="title">个性签名：</span>
						<input value="${userInfo.signature }" class="sffocus jqPlaceholder" name="userInfo.signature" type="text" maxlength="100"/>
						<br>
						<span class="title">&nbsp;</span>
						<button class="button sign" type="submit">保存</button>
					</fieldset>
				</div>
			</form>
		</div>
		<div class="userinfo" id="sidebar">
			<ul class="vtab">
				<li class="vtab-selected"> <a href="ucenter_ucenter_update.htm" class="user_icon_1">详细信息</a> </li>
				<li class="vtab-selected"> <a href="ucenter_ucenter_modifyPassInput.htm" class="user_icon_2">密码信息</a> </li>
				<li class="vtab-selected"> <a href="ucenter_ucenter_toSetNotice.htm" class="user_icon_3">提醒设置</a> </li>
			</ul>
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
if('${result}'=='true'){
	alert('恭喜您，修改成功！');
}else if('${result}'=='false'){
	alert('${message}');
}	
</script>
</html>